<template>
	<view class="conWrap">
		<view class="tabWrap">
			<view :class="tabVal === 'unhandle' ? 'tabCon tabConOn' : 'tabCon'" @click="tabClick('unhandle')">待处理告警</view>
			<view :class="tabVal === 'handle' ? 'tabCon tabConOn' : 'tabCon'" @click="tabClick('handle')">已完成告警</view>
		</view>
		<view class="warnClass">
			<view class="warnClassList">
				<view class="warnClassListL flexCenter bgRed"><uni-icons type="notification-filled" size="24" color="#fff"></uni-icons></view>
				<view class="warnClassListR">
					<view>危险</view>
					<view class="warnClassListRBot">{{dangerNum}}</view>
				</view>
			</view>
			<view class="warnClassList">
				<view class="warnClassListL flexCenter bgYellow"><uni-icons type="notification-filled" size="24" color="#fff"></uni-icons></view>
				<view class="warnClassListR">
					<view>警告</view>
					<view class="warnClassListRBot">{{warnNum}}</view>
				</view>
			</view>
			<view class="warnClassList">
				<view class="warnClassListL flexCenter bgBlue"><uni-icons type="notification-filled" size="24" color="#fff"></uni-icons></view>
				<view class="warnClassListR">
					<view>注意</view>
					<view class="warnClassListRBot">{{noticeNum}}</view>
				</view>
			</view>
		</view>
		
		<view v-for="(item,index) in data" :key="index" class="warnDetail" :class="{'bordercolorRed':item.type === '1','bordercolorYellow':item.type === '2','bordercolorBlue':item.type === '3'}" @click="pageDetail(item)">
			<view class="warnDetailTop">
				<view class="warnDetailTopL flexCenter" :class="{'bgRed':item.type === '1','bgYellow':item.type === '2','bgBlue':item.type === '3'}"><uni-icons type="notification-filled" size="20" color="#fff"></uni-icons></view>
				<view class="warnDetailTopR">
					<view class="warnDetailTopRTitle">{{item.equip}}——{{item.title}}</view>
					<view class="warnDetailTopRText">{{item.content}}</view>
				</view>
			</view>
			<view class="warnDetailBot"><uni-icons type="info" size="16" color="#aeaeae" class="iconMargin"></uni-icons>{{item.time}}</view>
		</view>
		<view class="hei20"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabVal: 'unhandle',
				data: [],
				dangerNum: 0,
				warnNum: 0,
				noticeNum: 0,
				data0: [
					{
						// 1危险;2警告;3注意
						type: '1',
						// '0'待处理;'1'已完成
						status: '0',
						equip: '3C001',
						title: '设备异常高温',
						content: '设备温度达到了100°C，超出了正常工作范围。由于高温，设备的处理速度明显下降，并且出现了频繁的重启现象。',
						time: '2024-10-12 13:35:52',
						source: '设备自动报警'
					},
					{
						// 1危险;2警告;3注意
						type: '1',
						// '0'待处理;'1'已完成
						status: '0',
						equip: '3C001',
						title: '设备异常高温',
						content: '设备温度达到了100°C，超出了正常工作范围。由于高温，设备的处理速度明显下降，并且出现了频繁的重启现象。',
						time: '2024-10-12 13:35:52',
						source: '人工巡检上报'
					},
					{
						// 1危险;2警告;3注意
						type: '2',
						// '0'待处理;'1'已完成
						status: '0',
						equip: '3C001',
						title: '设备异常高温',
						content: '设备温度达到了100°C，超出了正常工作范围。由于高温，设备的处理速度明显下降，并且出现了频繁的重启现象。',
						time: '2024-10-12 13:35:52',
						source: '设备自动报警'
					},
					{
						// 1危险;2警告;3注意
						type: '3',
						// '0'待处理;'1'已完成
						status: '0',
						equip: '3C001',
						title: '设备异常高温',
						content: '设备温度达到了100°C，超出了正常工作范围。由于高温，设备的处理速度明显下降，并且出现了频繁的重启现象。',
						time: '2024-10-12 13:35:52',
						source: '人工巡检上报'
					},
					{
						// 1危险;2警告;3注意
						type: '3',
						// '0'待处理;'1'已完成
						status: '0',
						equip: '3C001',
						title: '设备异常高温',
						content: '设备温度达到了100°C，超出了正常工作范围。由于高温，设备的处理速度明显下降，并且出现了频繁的重启现象。',
						time: '2024-10-12 13:35:52',
						source: '人工巡检上报'
					},
				],
				data1: [
					{
						// 1危险;2警告;3注意
						type: '2',
						// '0'待处理;'1'已完成
						status: '1',
						equip: '3C001',
						title: '设备异常高温',
						content: '设备温度达到了100°C，超出了正常工作范围。由于高温，设备的处理速度明显下降，并且出现了频繁的重启现象。',
						time: '2024-10-12 13:35:52',
						source: '设备自动报警'
					},
					{
						// 1危险;2警告;3注意
						type: '1',
						// '0'待处理;'1'已完成
						status: '1',
						equip: '3C001',
						title: '设备异常高温',
						content: '设备温度达到了100°C，超出了正常工作范围。由于高温，设备的处理速度明显下降，并且出现了频繁的重启现象。',
						time: '2024-10-12 13:35:52',
						source: '设备自动报警'
					},
					{
						// 1危险;2警告;3注意
						type: '1',
						// '0'待处理;'1'已完成
						status: '1',
						equip: '3C001',
						title: '设备异常高温',
						content: '设备温度达到了100°C，超出了正常工作范围。由于高温，设备的处理速度明显下降，并且出现了频繁的重启现象。',
						time: '2024-10-12 13:35:52',
						source: '人工巡检上报'
					},
					{
						// 1危险;2警告;3注意
						type: '1',
						// '0'待处理;'1'已完成
						status: '1',
						equip: '3C001',
						title: '设备异常高温',
						content: '设备温度达到了100°C，超出了正常工作范围。由于高温，设备的处理速度明显下降，并且出现了频繁的重启现象。',
						time: '2024-10-12 13:35:52',
						source: '设备自动报警'
					},
					{
						// 1危险;2警告;3注意
						type: '3',
						// '0'待处理;'1'已完成
						status: '1',
						equip: '3C001',
						title: '设备异常高温',
						content: '设备温度达到了100°C，超出了正常工作范围。由于高温，设备的处理速度明显下降，并且出现了频繁的重启现象。',
						time: '2024-10-12 13:35:52',
						source: '人工巡检上报'
					},
				]
			}
		},
		onLoad() {
			this.countNum(this.data0)
			this.data = JSON.parse(JSON.stringify(this.data0))
		},
		methods: {
			tabClick(val) {
				this.tabVal = val
				if (val === 'unhandle') {
					this.countNum(this.data0)
					this.data = JSON.parse(JSON.stringify(this.data0))
				} else {
					this.countNum(this.data1)
					this.data = JSON.parse(JSON.stringify(this.data1))
				}
			},
			countNum(arr) {
				this.dangerNum = arr.filter(e => e.type === '1').length
				this.warnNum = arr.filter(e => e.type === '2').length
				this.noticeNum = arr.filter(e => e.type === '3').length
			},
			pageDetail(item) {
				uni.navigateTo({
					url: `/pages/warning/detail?param=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style>
	.tabWrap{
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tabCon{
		flex: 1;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		font-size: 30rpx;
		color: #000;
		border-bottom: #ebebeb solid 1px;
	}
	.tabConOn{
		color: #55aaff;
		border-bottom: #55aaff solid 2rpx;
	}
	.flexCenter{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.conWrap{
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	.warnClass{
		display: flex;
		justify-content: space-around;
		padding: 30rpx 0 50rpx;
	}
	.warnClassList{
		width: 130rpx;
		height: 66rpx;
		display: flex;
	}
	.warnClassListL{
		width: 66rpx;
		height: 66rpx;
		margin-right: 10rpx;
		border-radius: 10rpx;
	}
	.warnClassListR{
		flex: 1;
		font-size: 24rpx;
		line-height: 30rpx;
		color: #666;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.warnClassListRBot{
		font-weight: bold;
		font-size: 30rpx;
		line-height: 30rpx;
	}
	.warnDetail{
		width: 670rpx;
		margin: 0 auto 20rpx;
		background: #fff;
		border-radius: 10rpx;
		border-left-width: 4rpx;
		border-left-style: solid;
		padding: 10rpx 20rpx;
	}
	.warnDetailTop{
		display: flex;
		border-bottom: #f0f0f0 solid 2rpx;
		padding-bottom: 20rpx;
	}
	.warnDetailTopL{
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin: 30rpx 30rpx 0 15rpx;
	}
	.warnDetailTopR{
		width: 565rpx;
		
	}
	
	.warnDetailTopRTitle{
		font-size: 28rpx;
		color: #666;
		font-weight: bold;
		padding: 10rpx 0 16rpx;
	}
	.warnDetailTopRText{
		font-size: 24rpx;
		line-height: 38rpx;
		color: #999;
	}
	.warnDetailBot{
		padding: 20rpx 0 20rpx;
		font-size: 20rpx;
		color: #aeaeae;
		line-height: 22rpx;
		display: flex;
		align-items: center;
	}
	.iconMargin{
		margin-right: 10rpx;
	}
	.bgRed{
		background-color: #e61e21;
	}
	.bgYellow{
		background-color: #f2ae05;
	}
	.bgBlue{
		background-color: #0b93f6;
	}
	.bordercolorRed{
		border-left-color: #e61e21;
	}
	.bordercolorYellow{
		border-left-color: #f2ae05;
	}
	.bordercolorBlue{
		border-left-color: #0b93f6;
	}
</style>
